@charset "utf-8";

@import '../../theme.scss';

.x-radio {
  display: inline-flex;
  align-items: center;
  padding: px(10);
  transition: all 0.3s ease-out;
  user-select: none;

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: px(32);
    height: px(32);
    border-radius: 50%;
    background: var(--x-radio-bg-color);
    overflow: hidden;
    transition: all 0.1s ease-out;

    svg {
      display: block;
      width: px(20);
      height: px(20);
      opacity: 0;
      transform: scale(0);
      transition: all 0.2s ease-out;
    }

    path {
      fill: #fff;
    }
  }

  &__text {
    display: block;
    font-size: px(26);
    color: var(--x-text-color);
    margin-left: px(10);
    user-select: none;
  }

  &--checked {
    .x-radio__icon {
      background: var(--x-primary-color);

      svg {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  &--disabled {
    opacity: 0.5;

    &:active {
      opacity: 0.5 !important;
    }
  }

  &--hollow {
    .x-radio__icon {
      background: #fff;
      box-shadow: 0 0 0 1px var(--x-radio-border-color) inset;

      svg {
        width: px(16);
        height: px(16);
      }

      path {
        fill: var(--x-primary-color);
      }
    }

    &.x-radio--checked {
      .x-radio__icon {
        box-shadow: 0 0 0 1px var(--x-primary-color) inset;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  .x-radio--hollow .x-radio__icon {
    background-color: transparent;
  }
}
